const { defineConfig } = require("@vue/cli-service");
// const defatulConfig = require("./src/setting");
// 设置 项目名称
// const name = defatulConfig.title;
// const CompressionWebpackPlugin = require("compression-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";

//判断是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";

const cdn = {
  externals: {
    vue: "Vue",
    "vue-router": "VueRouter",
    vuex: "Vuex",
    "element-ui": "ELEMENT",
  },
  // "https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css",
  css: [
    "https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.min.css",
  ],
  js: [
    "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
    "https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js",
    "https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
    "https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.min.js",
    // "https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js",
  ],
};

module.exports = defineConfig({
  lintOnSave: false,
  publicPath: "./",
  transpileDependencies: true,
  productionSourceMap: false, // 设为false，既可以减少包大小，也可以加密源码
  // transpileDependencies: ["element-ui"], //指定某个库在打包的时候需要编译
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
      config["performance"] = {
        //打包文件大小配置
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000,
      };
      config.plugins.push(
        new CompressionWebpackPlugin({
          test: /\.js$|\.html$|\.css$/u,
          threshold: 4096, // 超过 4kb 压缩
        })
      );
    }
  },
  chainWebpack: (config) => {
    config.optimization.minimizer("terser").tap((args) => {
      Object.assign(args[0].terserOptions.compress, {
        // 生产模式 console.log 去除
        warnings: false, // 默认 false
        drop_console: false,
        drop_debugger: false, // 默认也是true
      });
      return args;
    }),
      config.when(isProduction, (config) => {
        // 如果是生产环境，那么将main-prod.js作为入口文件(我这里是ts和js一样)。
        // config.set("externals", cdn.externals);
        // // 这里的作用是在后面index.html页面中通过link，script标签加载这些cdn链接。
        // config.plugin("html").tap((args) => {
        //   args[0].cdn = cdn;
        //   return args;
        // });
        config.entry("app").clear().add("./src/main-dev.js");
      });
    config.when(!isProduction, (config) => {
      // 如果是不是生产环境，那么将main-dev.js作为入口文件(我这里是ts和js一样).
      config.entry("app").clear().add("./src/main-dev.js");
    });
  },
});
